<template>
  <MyVanskeletonVue :loading="loading">
    <template v-slot:my-content>
      <div>
        <NavShareBar :title="title" :onShare="onShare" />
        <div class="content-top">
          <!-- 招聘会 -->
          <div class="job-fair-info">
            <div class="info">
              <b>{{ zphData.title }}</b>
              <span>{{ zphData.zpDate }}</span>
              <span>{{ zphData.addr }}</span>
            </div>
            <div class="data">
              <span>{{ list_source.length }}</span>
              <span>{{ jobCount }}</span>
            </div>
            <van-search
              v-model="kw"
              shape="round"
              placeholder="请输入职位/公司名称关键字"
              style="border-radius: 0 0 10px 10px"
              @search="onSearch"
            />
          </div>

          <!--企业汇总-->
          <div class="job-fair-gather">
            <div
              class="job-fair-gather-item"
              v-for="(item, index) in list"
              :key="index"
              @click="onItemClick(item)"
            >
              <p class="name">
                <b>{{ item.companyname }}</b>
              </p>
              <ul class="jobs">
                <li
                  v-for="(item_job, index_job) in item.joblist.slice(0, 3)"
                  :key="index_job"
                >
                  <span>{{ item_job.jobname }}</span>
                  <span @click.stop="apply(item.companyid, item_job.jobid)"
                    >投递</span
                  >
                </li>
              </ul>
              <p class="btns">
                <span v-if="item.joblist.length > 3">查看更多职位</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MyVanskeletonVue>
</template>

<script>
import NavShareBar from "@/components/NavShareBar.vue";
import { GetXCZPHInfo, XCZPHApplyJob } from "@/util/http";
import MyVanskeletonVue from "@/components/MyVanskeleton.vue";
import { Search, Icon, Toast, Dialog } from "vant";
import { checkPersonLogin } from "@/util/session";
import { mixin_person_tologin } from "@/mixin/mixins";
import { returnToPhoneWithData } from "@/util/phone";
import Global from "@/Global";
export default {
  name: "ZPHInfo",
  components: {
    NavShareBar,
    MyVanskeletonVue,
    [Search.name]: Search,
    [Icon.name]: Icon,
  },
  props: ["title", "id", "zphData"],
  mixins: [mixin_person_tologin],
  // 定义属性
  data() {
    return {
      loading: true,
      list: [],
      list_source: [],
      kw: "",
    };
  },
  computed: {
    jobCount() {
      let count = 0;
      this.list_source.forEach((item) => {
        //count += item.joblist.length
        item.joblist.forEach((item2) => {
          if (item2.InviteNum === "若干") {
            count += 5;
          } else {
            count += parseInt(item2.InviteNum);
          }
        });
      });
      return count;
    },
  },
  mounted() {
    this.onGetInfo();
  },
  // 方法集合
  methods: {
    onGetInfo() {
      GetXCZPHInfo(this.id).then((res) => {
        this.loading = false;
        this.list = res;
        this.list_source = res;
      });
    },
    onItemClick(item) {
      this.$router.push({
        name: "person-xczph-company",
        params: {
          xczphid: this.id,
          companyid: item.companyid,
          joblist: item.joblist,
        },
      });
    },
    onSearch(kw) {
      if (kw.trim() === "") {
        let str = JSON.stringify(this.list_source);
        this.list = JSON.parse(str);
        return;
      }
      this.list = [];
      let list_source2 = [];
      list_source2 = JSON.parse(JSON.stringify(this.list_source));

      for (let i = 0; i < list_source2.length; i++) {
        let item = list_source2[i];
        if (item.companyname.indexOf(kw) >= 0) {
          this.list.push(item);
          continue;
        }
        let list_job = [];
        for (let j = 0; j < item.joblist.length; j++) {
          let item_job = item.joblist[j];
          if (item_job.jobname.indexOf(kw) >= 0) {
            list_job.push(item_job);
          }
        }
        if (list_job.length > 0) {
          item.joblist = list_job;
          this.list.push(item);
          continue;
        }
      }
    },
    apply(companyid, jobid) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      Dialog.confirm({
        message: "确认投递该职位？",
        confirmButtonText: "投递",
      })
        .then(() => {
          XCZPHApplyJob(this.id, companyid, jobid).then((res) => {
            Toast(res.msg);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    onShare() {
      // console.log(this.zphData);
      let title = `${this.zphData.title}火热开展，赶紧报名！`;
      let content = `${this.zphData.zpDate} | ${this.zphData.addr}`;
      returnToPhoneWithData({
        action: "share",
        title,
        content,
        url:
          Global.share_person_url +
          `/pages/index/zph/zphInfo?xczpID=${this.id}`,
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

.job-fair-info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}

.job-fair-info::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 46px;
  z-index: -1;
  background: linear-gradient(to right, #f90, #f70);
}

.job-fair-info .info {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 12px;
}

.job-fair-info .info b {
  display: flex;
  margin-bottom: 14px;
  font-size: 20px;
  color: #fff;
}

.job-fair-info .info span {
  display: flex;
  font-size: 14px;
  color: #fff;
}

.job-fair-info .info span::before {
  display: flex;
  flex: 0 0 44px;
}

.job-fair-info .info span:nth-child(2)::before {
  content: "时间：";
}

.job-fair-info .info span:nth-child(3)::before {
  content: "地点：";
}

.job-fair-info .data {
  display: flex;
  padding: 10px 0;
  border-bottom: 0.5px solid #ddd;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
}

.job-fair-info .data span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: #f70;
}

.job-fair-info .data span + span {
  border-left: 0.5px solid #e8e8e8;
}

.job-fair-info .data span::after {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

.job-fair-info .data span:nth-child(1)::after {
  content: "现参会企业";
}

.job-fair-info .data span:nth-child(2)::after {
  content: "现发布岗位";
}

.job-fair-gather {
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
}

.job-fair-gather-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #fff;
}

.job-fair-gather-item + .job-fair-gather-item {
  margin-top: 10px;
}

.job-fair-gather-item .name {
  display: flex;
  flex-direction: column;
  padding: 18px 0;
}

.job-fair-gather-item .name b {
  font-size: 18px;
  color: #333;
}

.job-fair-gather-item .jobs {
  display: flex;
  flex-direction: column;
}

.job-fair-gather-item .jobs li {
  display: flex;
  align-items: center;
  padding: 0 1px;
}

.job-fair-gather-item .jobs li + li {
  margin-top: 15px;
}

.job-fair-gather-item .jobs li::before {
  content: "热招";
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 32px;
  height: 18px;
  border-radius: 30px 0 30px 30px;
  background-color: #f70;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
}

.job-fair-gather-item .jobs li span:nth-child(1) {
  display: -webkit-box;
  flex: 1;
  padding: 0 10px;
  font-size: 15px;
  color: #333;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.job-fair-gather-item .jobs li span:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 48px;
  padding: 1px 0;
  border: 1px solid #457ccf;
  border-radius: 30px;
  font-size: 13px;
  color: #457ccf;
}

.job-fair-gather-item .jobs li span:nth-child(2).disabled {
  border-color: #ddd;
  color: #ccc;
}

.job-fair-gather-item .btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 18px 0 14px;
}

.job-fair-gather-item .btns span {
  position: relative;
  padding-right: 10px;
  font-size: 13px;
  color: #aaa;
}

.job-fair-gather-item .btns span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  margin-top: -3.5px;
  transform: rotate(45deg);
}
</style>
